<style>
  #dialog::part(dialog) {
    max-width: 300px;
  }

  #buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 28px;
    margin-top: 20px;
  }

  #buttons cr-button {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    height: 48px;
    min-width: 48px;
    width: 48px;
  }

  #buttons cr-button:hover {
    opacity: 0.8;
  }

  #buttons > :not(:last-child) {
    margin-inline-end: 12px;
  }

  #facebookButton {
    background-image: url(icons/facebook.svg);
  }

  #twitterButton {
    background-image: url(icons/twitter.svg);
  }

  #emailButton {
    background-image: url(icons/mail.svg);
  }

  #url {
    --cr-input-error-display: none;
  }

  #copyButton {
    --cr-icon-image: url(icons/copy.svg);
    margin-inline-start: 2px;
  }
</style>
<cr-dialog id="dialog" show-on-attach>
  <div id="title" slot="title">
    [[title]]
  </div>
  <div slot="body">
    <div id="buttons">
      <cr-button id="facebookButton" title="[[i18n('facebook')]]"
          on-click="onFacebookClick_">
      </cr-button>
      <cr-button id="twitterButton" title="[[i18n('twitter')]]"
          on-click="onTwitterClick_">
      </cr-button>
      <cr-button id="emailButton" title="[[i18n('email')]]"
          on-click="onEmailClick_">
      </cr-button>
    </div>
    <cr-input readonly label="[[i18n('doodleLink')]]" id="url"
        value="[[url.url]]">
      <cr-icon-button id="copyButton" slot="suffix" title="[[i18n('copyLink')]]"
          on-click="onCopyClick_">
      </cr-icon-button>
    </cr-input>
  </div>
  <div slot="button-container">
    <cr-button id="doneButton" class="action-button" on-click="onCloseClick_">
      [[i18n('doneButton')]]
    </cr-button>
  </div>
</cr-dialog>
